<template>
    <el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-width="100px" label-position="top"
     v-loading="submiting" element-loading-text="拼命加载中">
        <el-form-item label="登录帐号：" prop="account">
            <el-input v-model="loginForm.account"></el-input>
        </el-form-item>
        <el-form-item label="登录密码：" prop="password">
            <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')" :loading="submiting">立即登录</el-button>
            <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    data() {
        var validateAccount = function(rule, value, callback) {
            if (value.length !== 11) {
                callback(new Error('登录帐号格式不正确'));
            } else {
                callback();
            }
        };
        return {
            submiting: false,
            loginForm: {
                account: '',
                password: ''
            },
            loginRules: {
                account: [
                    { required: true, message: '登录帐号不能为空' },
                    { validator: validateAccount }
                ],
                password: [
                    { required: true, message: '登录密码不能为空' },
                    { min: 6, max: 15, message: '登录密码应为6-15个字符' }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            var _this = this;
            _this.submiting = true;
            setTimeout(function() {
                _this.$refs[formName].validate((valid) => {
                    _this.submiting = false;
                    if (valid) {
                        _this.$message({
                            message: '恭喜你，表单验证成功',
                            type: 'success'
                        });
                    } else {
                        _this.$message({
                            message: '很遗憾，表单验证失败',
                            type: 'error'
                        });
                        return false;
                    }
                });
            }, 1000);
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style scoped>
form {
    width: 500px;
    margin: 20px auto;
}
</style>


